Repository navigation
Conversation
The off-canvas RTL transform used a `:root:dir(rtl)` ancestor, which is
more specific than `[open] { transform: none }`. In RTL the drawer stayed
translated outside the viewport while the backdrop still appeared.
Wrap the RTL qualifier in `:where()` so it has the same specificity as
the LTR off-canvas rule and the open state can win.
Fixes twbs#43340
julien-deramond
added
v6
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The default (animated) drawer uses an off-canvas
translateXwhile closed, then[open] { transform: none }to slide it back on-screen. The RTL flip of that off-canvas transform was written as:That selector is more specific than
.drawer:not(.drawer-instant)[open] { transform: none }, so in RTL the closed-state translation wins after open. The backdrop still appears (the<dialog>is in the top layer), but the panel stays outside the viewport.This wraps the RTL qualifier in
:where()so the off-canvas rule has the same specificity as the LTR equivalent and the open state can win. LTR start/end placement is unchanged.Motivation & Context
Fixes #43340 (confirmed). A reduced case with
dir="rtl"on<html>and a.drawer.drawer-start/.drawer-endopened via theopenattribute shows the panel translated fully off-screen on currentmainCSS; after this change the computed transform isnoneand the panel sits on the correct inline side (start on the right, end on the left).Type of changes
Checklist
npm run lint)scss/_drawer.scsswas stylelint-clean.npm run css-compileandnpm run css-prefix-mainwere run locally to inspect the compiled selectors; dist files are not included, per the contributing guidelines. There is no existing CSS cascade test fixture for drawer placement, so the open-state transform /getBoundingClientRect()behavior was verified in headless Chrome against the compiled CSS (RTL and LTR, start and end) instead of adding a one-off harness.Live previews
Related issues